<%--
  Created by IntelliJ IDEA.
  User: zzhua195
  Date: 2020/7/16
  Time: 21:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Quartz</title>
    <link rel="stylesheet" href="${ctx}/static/layui/css/layui.css">
    <style>
        .z-table {
            padding: 20px;
        }
    </style>
</head>
<body>


<div class="z-table">

    <table id="quartzTable" lay-filter="quartzTable"></table>
</div>
</body>
<script type="text/html" id="quartztoolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">
            <i class="layui-icon">&#xe608;</i>新增
        </button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="view">查看</a>
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="update">修改</a>
    {{#  if(!d.status){ }}
    <a class="layui-btn layui-btn-xs layui-btn-checked" lay-event="start">启动</a>
    {{#  } }}
    {{#  if(d.status){ }}
    <a class="layui-btn layui-btn-xs layui-btn-checked" lay-event="end">停止</a>
    {{#  } }}
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>
<%--弹框--%>
<div id="viewOrUpdateDiv" style="display: none;"></div>
<%--弹框模板--%>
<script  id="viewOrUpdateTpl" type="text/html">
    <form  class="layui-form layui-form-pane" id="taskForm" lay-filter="taskForm" style="margin-left: 20px;">
        <div style="width:100%;height:300px;">
            <div class="layui-form-item">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
                    <legend style="font-size:16px;">任务信息</legend>
                </fieldset>
            </div>
            <div class="layui-form-item">
                <label for="jobName" class="layui-form-label">
                    <span class="x-red">*</span>任务名称
                </label>
                <div class="layui-input-inline">
                    <input type="text"  id="jobName" name="jobName"
                           {{# if(d.title=='view') { }}
                                readonly
                           {{# } }}

                           lay-verify="jobName"
                           autocomplete="off" class="layui-input">
                    <%--隐藏域名--%>
                    <input type="hidden" name="id" >
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span><span id="ums">名称必填</span>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label for="cron" class="layui-form-label">
                        <span class="x-red">*</span>表达式
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="cron"
                               {{# if(d.title=='view') { }}
                               readonly
                               {{# } }}
                               name="cron" lay-verify="cron"  autocomplete="off" class="layui-input">
                    </div>
                    <div  class="layui-form-mid layui-word-aux">
                        <span class="x-red">*</span><a href="http://cron.qqe2.com/" target="_blank">获取表达式</a>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
                    <legend style="font-size:16px;">执行类要实现Job</legend>
                </fieldset>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label for="clazzPath" class="layui-form-label">
                        <span class="x-red">*</span>任务执行类
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="clazzPath"
                               {{# if(d.title=='view') { }}
                               readonly
                               {{# } }}
                               style="width: 300px;" name="clazzPath" lay-verify="clazzPath"  autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label for="jobDesc" class="layui-form-label">
                        <span class="x-red">*</span>任务描述
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="jobDesc"
                               {{# if(d.title=='view') { }}
                               readonly
                               {{# } }}
                               name="jobDesc" lay-verify="jobDesc"  autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
    </form>
</script>

<script src="${ctx}/static/layui/layui.js"></script>
<script>
    layui.use(['table','jquery','layer','laytpl','form'], function () {
        var table = layui.table;
        var $ = layui.jquery;
        var layer = layui.layer;
        var laytpl = layui.laytpl;
        var form = layui.form;
        table.render({
            id: 'quartzTable',
            elem: '#quartzTable'
            , url: '${ctx}/job/showJobList'
            ,toolbar: '#quartztoolbar' //开启头部工具栏，并为其绑定左侧模板
            , title: '任务列表'
            , cols: [[
                {field: 'id', title: 'ID', width: 200}
                , {field: 'jobName', title: '任务名称', width: 200}
                , {field: 'cron', title: 'cron表达式', width: 150}
                , {field: 'clazzPath', title: '任务类', width: 300}
                , {field: 'jobDesc', title: '任务描述'}
                // ,{field:'createBy', title:'创建人', width:80, sort: true}
                // ,{field:'createDate', title:'创建时间', width:120}
                // ,{field:'updateBy', title:'修改人', width:100, sort: true}
                // ,{field:'updateDate', title:'修改时间', width:120}
                , {
                    field: 'status', title: '状态', width: 80,
                    templet: function (res) {
                        if (res.status) {
                            return '<div>' + "已开启" + '<span class="layui-badge-dot layui-bg-green"></span>' + '</div>';
                        }
                        return '<div>' + "已关闭" + '<span class="layui-badge-dot"></span>' + '</div>';
                    }
                }
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', align: 'center', width: 300}
            ]]
            , page: true
            , height: 'full-250'
        });

        //头工具栏事件
        table.on('toolbar(quartzTable)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    url = '/job/addJob';
                    openDiv('add', null);
                    break;
            }
        });

        var url; // 新增和修改的url

        //监听行工具事件
        table.on('tool(quartzTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'start') {
                layer.confirm('确定开启任务[<label style="color: #00AA91;">' + data.jobName + '</label>]?', function () {
                    reqByAjax(data.id, '/job/startJob', 'quartzTable');
                });
            } else if (obj.event === 'end') {
                layer.confirm('确定停止任务[<label style="color: #00AA91;">' + data.jobName + '</label>]?', function () {
                    reqByAjax(data.id, '/job/endJob', 'quartzTable');
                });
            } else if(obj.event === 'del'){
                if (!data.status) {
                    layer.confirm('确定删除任务[<label style="color: #00AA91;">' + data.jobName + '</label>]?',
                        function () {
                            reqByAjax(data.id, '/job/del', 'quartzTable');
                        });
                } else {
                    layer.msg('已经启动任务无法更新,请停止后删除', {icon: 5, offset: 'rb', area: ['200px', '100px'], anim: 2});
                }
            } else if(obj.event === 'view') {
                openDiv('view',data);

            }else if (obj.event === 'update') {
                url = '/job/updateJob';
                openDiv('update',data);
            } else {
                // do noting..
            }
        });

        function cancel() {
            console.log('取消');
        }

        function openDiv(title,rowData){
            var data = {title:title};
            laytpl($("#viewOrUpdateTpl").html()).render(data,function (html) {
                $('#viewOrUpdateDiv').html(html);
                if (rowData != null) {
                    form.val('taskForm', rowData);
                } else{
                    form.valueOf('taskForm',null);
                }
            });


            if (title == 'view') {
                layer.open({
                    type: 1,
                    shade: [0.8, '#393D49'],
                    shadeClose: false,
                    title: title, //不显示标题
                    content: $('#viewOrUpdateDiv'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                    area: ['800px', '450px']
                });
            } else{
                layer.open({
                    type: 1,
                    shade: [0.8, '#393D49'],
                    shadeClose: false,
                    title: title, //不显示标题
                    content: $('#viewOrUpdateDiv'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                    area: ['800px', '450px'],btn: ['确定', '取消']
                    ,yes: function(index, layero){
                        submitForm(url,index);
                    }
                    ,btn2: function(index, layero){
                        // do nothing
                        //return false 开启该代码可禁止点击该按钮关闭
                    },
                    btnAlign:'c'
                });
            }

        }

        function submitForm(url,layerIndex) {
            $.ajax({
                url: url,
                type: "post",
                data: form.val('taskForm'),
                success: function (d) {
                    if (d.flag) {
                        layer.close(layerIndex);
                        table.reload('quartzTable');
                        layer.msg('操作成功');
                    } else {
                        layer.msg(d.msg);
                    }
                }
            });
        }

        function reqByAjax(id, url, tableId) {
            $.ajax({
                url: url,
                type: "post",
                data: {id: id},
                success: function (d) {
                    if (d.flag) {
                        layer.msg(d.msg, {icon: 6, offset: 'rb', area: ['120px', '80px'], anim: 2});
                        layui.table.reload(tableId);
                    } else {
                        layer.msg(d.msg, {icon: 5, offset: 'rb', area: ['120px', '80px'], anim: 2});
                    }
                }
            });
        }

    });

</script>
</html>
<%--INSERT INTO `quartz-test`.`sys_job` (`id`, `job_name`, `cron`, `status`, `clazz_path`, `job_desc`, `create_by`, `create_date`, `update_by`, `update_date`) VALUES ('202007161153078', '任务名称: HelloJob', '0/5 * * * * ?', '0', 'com.zzhua.quartz.job.HelloJob', 'hellojob测试', 'acfc0e9232f54732a5d9ffe9071bf572', '2020-07-16 11:36:35', 'acfc0e9232f54732a5d9ffe9071bf572', '2020-07-16 12:09:51');--%>
